<template>
	<div class="mine pageContainer">
		<div class="container scroll-container" style="width: auto;padding-bottom: 180px;">
			<div class="top_box anquantop">
				<div class="top_bg_box">
					<i aria-hidden="true" focusable="false"
						style="display: inline-block; position: relative; width: 7.5rem; height: 3.7rem; background-image: url(/icons/main.png); background-position: 0rem 0rem; background-size: 12.2rem 11.46rem;"></i>
				</div>
				<div class="top_ava_box">
					<div class="ava_left_box">
						<div class="ava_img_box">
							<img v-if="userInfo && userInfo.logo" class="ava_img"
								:src="$F.getApiUrl()+`/profile/${userInfo.logo}`" alt="">
							<img v-else class="ava_img" src="/icons/mine/img_txn24.png" alt="">
							<!-- <div class="vip_level">
								<div class="level_bg">
									<img class="vip_img" src="/icons/mine/img_vip.png" alt="">
									<span>0</span>
								</div>
							</div> -->
						</div>
						<div class="ava_info_box">
							<div class="ava_info">
								<span>ID:</span>
								<span class="id_num">{{userInfo?userInfo.id:''}}</span>
								<span class="ava_icon">
									<i class="icons">
										<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite">

											</use>
										</svg>
									</i>
								</span>
							</div>
							<div class="ava_info_2">
								<span>{{$t('l_zhanghao')}}:</span>
								<span class="id_num">{{userInfo?userInfo.username:''}}</span>
								<span class="ava_icon">
									<i class="icons">
										<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite">

											</use>
										</svg>
									</i>
								</span>
							</div>
							<div class="ava_info_3">
								<!-- <i class="img_icon">
									<i aria-hidden="true" focusable="false" style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/main.png); background-position: -4.66071rem -9.73214rem; background-size: 10.8929rem 10.2321rem;"></i>
								</i> -->
								<!-- <div class="line"></div> -->
								<div class="balance_box">
									<span>{{userInfo?userInfo.money:''}}</span>
									<i class="icons" @click="reloadUserInfo(1)">
										<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite">

											</use>
										</svg>
									</i>
								</div>
							</div>
						</div>
					</div>

					<div class="ava_right_box">
						<div class="message_box">
							<div class="message_icon" @click="gonotice">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_grzx_xx2--sprite">

										</use>
									</svg>
								</i>
								<!-- <div class="message_num">
									<p class="p1"><span>24</span></p>
									<p class="p2"></p>
								</div> -->
							</div>
							<div class="message_text">{{$t('l_xiaoxi')}}</div>
						</div>

						<div class="right_icon" @click="gosetting">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

									</use>
								</svg>
							</i>
						</div>
					</div>
				</div>

				<div class="bottom_box">
					<div class="fuction_item" @click="gowalletcenter">
						<i class="icons">
							<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_wd_zxqb1--sprite">

								</use>
							</svg>
						</i>
						<span>{{$t('l_zhongxinqianbao')}}</span>
					</div>
					<div class="right_line"></div>
					<div class="fuction_item" @click="gosecurity">
						<i class="icons">
							<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_wd_tx_cny--sprite">

								</use>
							</svg>
						</i>
						<span>{{$t('l_tixian')}}</span>
					</div>
					<div class="right_line"></div>
					<div class="fuction_item" @click="gorecharge">
						<i class="icons">
							<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_wd_cz1--sprite">

								</use>
							</svg>
						</i>
						<span>{{$t('l_chongzhi')}}</span>
					</div>
					<div class="right_line"></div>
					<div class="fuction_item" @click="goYuebao">
						<i class="icons">
							<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_wd_yeb_cny--sprite">

								</use>
							</svg>
						</i>
						<span>{{$t('l_yuebao')}}</span>
					</div>
				</div>
			</div>

			<div class="main_box">
				<div class="main_top_box">
					<div class="main_level_box" v-if="userInfo">
						<div class="main_level_left" @click="goVip">
							<div class="level_ava">
								<span>{{userInfo?userInfo.vip_id:''}}</span>
							</div>
							<div class="level_content" v-if="userInfo.vip_id == 0">
								<div class="level_content_top">
									<span>{{$t('l_juli')}}<i>VIP{{userInfo.levelInfo[0].level}}</i></span>
									<span>{{$t('l_damahaicha')}}<strong>{{(userInfo.levelInfo[0].level_money-userInfo.levelDecMoney).toFixed(2)*1}}</strong></span>
								</div>
								<div class="level_content_bottom">
									<p>{{$t('l_jinjizaidama')}}</p>
									<div class="level_num">
										<div class="level_num_line">
											<div class="line_box"
												:style="`width:`+userInfo.levelDecMoney/userInfo.levelInfo[0].level_money*100+`%;`">
											</div>
											<span>{{userInfo.levelDecMoney*1}}/{{userInfo.levelInfo[0].level_money*1}}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="level_content" v-if="userInfo.vip_id > 0">
								<div class="level_content_top">
									<span><i>{{userInfo.levelInfo[userInfo.vip_id].name}}</i></span>
										<span>{{ $t('l_touzhuliushui') }}<strong style="margin-left:10px;">{{userInfo.levelInfo[userInfo.vip_id].num}}</strong></span>
									<!-- <span>打码还差<strong>{{(userInfo.levelInfo[1].level_money-userInfo.levelDecMoney).toFixed(2)*1}}</strong></span> -->
								</div>
								<!-- <div class="level_content_bottom">
									<p>晋级再打码</p>
									<div class="level_num">
										<div class="level_num_line">
											<div class="line_box" :style="`width:`+userInfo.levelDecMoney/userInfo.levelInfo[1].level_money*100+`%;`"></div>
											<span>{{userInfo.levelDecMoney*1}}/{{userInfo.levelInfo[1].level_money*1}}</span>
										</div>
									</div>
								</div> -->
							</div>
							<!-- <div class="level_content" v-if="userInfo.vip_id > 0">
								<div class="level_content_top">
									<span>{{$t('l_juli')}}<i>VIP{{userInfo.levelInfo[1].level}}</i></span>
									<span>{{$t('l_damahaicha')}}<strong>{{(userInfo.levelInfo[1].level_money-userInfo.levelDecMoney).toFixed(2)*1}}</strong></span>
								</div>
								<div class="level_content_bottom">
									<p>{{$t('l_jinjizaidama')}}</p>
									<div class="level_num">
										<div class="level_num_line">
											<div class="line_box"
												:style="`width:`+userInfo.levelDecMoney/userInfo.levelInfo[1].level_money*100+`%;`">
											</div>
											<span>{{userInfo.levelDecMoney*1}}/{{userInfo.levelInfo[1].level_money*1}}</span>
										</div>
									</div>
								</div>
							</div> -->
						</div>
						<div class="main_level_right">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">
									</use>
								</svg>
							</i>
						</div>
					</div>

					<div class="main_item">
						<div class="main_item_list" @click="goRecord('1')">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_zhmx_cny--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_zhanghumingxi')}}</span>
						</div>
						<div class="main_item_list" @click="goRecord('2')">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_tzjl_cny--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_touzhubaobiao')}}</span>
						</div>
						<!-- <div class="main_item_list" @click="goRecord('3')">
							<i class="icons">
								<i class="anticon_icon"></i>
							</i>
							<span>个人报表</span>
						</div> -->
						<div class="main_item_list" @click="gosecurity">
							<i class="icons" >
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_txgl--sprite"></use>
								</svg>
							</i>
							<span>{{$t('l_tixianguanli')}}</span>
						</div>
					</div>
				</div>

				<div class="main_content_box">
					<div class="main_content_item" @click="gopromotion">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_tg1--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_tuiguangzhuanqian')}}</span>
						</div>
						<div class="main_content_item_right">
							<!-- <div class="right_text">
								{{$t('l_yuerubaiwan')}}
							</div> -->
							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<div class="main_content_item" @click="xianlu = true">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_wlzt--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_wangluozhuangtai')}}</span>
						</div>
						<div class="main_content_item_right">
							<div class="right_text">
								<span>{{$t('l_xianlu')}}{{baseName}}</span>
								<span>{{baseMS}}MS</span>
							</div>
							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<div class="main_content_item" @click="gosetting">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_sz1--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_gerenziliao')}}</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<div class="main_content_item" @click="gosecure">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_aqzx1--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_anquanzhongxin')}}</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<!-- <div class="main_content_item">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em"height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_yy1--sprite">
										
									</use>
								</svg>
							</i>
							<span>音乐</span>
						</div>
						<div class="main_content_item_right">
							
							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em"height="1em" fill="currentColor" aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">
											
										</use>
									</svg>
								</i>
							</div>
						</div>
					</div> -->

					<div class="main_content_item" @click="yuyan=true">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em"height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_lang--sprite">
										
									</use>
								</svg>
							</i>
							<span>{{$t('l_xuanzeyuyan')}}</span>
						</div>
						<div class="main_content_item_right">
							<div class="right_text">
								{{langName}}
							</div>
							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em"height="1em" fill="currentColor" aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">
											
										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<!-- <div class="main_content_item" @click="gokefu">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_cjwt--sprite">

									</use>
								</svg>
							</i>
							<span>常见问题</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div> -->

					<!-- <div class="main_content_item" @click="gofeedback">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_yjfk1--sprite">

									</use>
								</svg>
							</i>
							<span>有奖反馈</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div> -->

					<div class="main_content_item" @click="goabout">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_gywm1--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_guanyu')}}</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

					<div class="main_content_item" @click="loginout = true">
						<div class="main_content_item_left">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_tc1--sprite">

									</use>
								</svg>
							</i>
							<span>{{$t('l_anquantuichu')}}</span>
						</div>
						<div class="main_content_item_right">

							<div class="right_allow">
								<i class="icons">
									<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite">

										</use>
									</svg>
								</i>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="zzc" v-show="loginout">
			<div class="zzcbox">
				<div class="zzccon">
					<div>
						<div class="zzctext">{{$t('l_wenxintishi')}}</div>
						<div class="zzctext1">{{$t('l_shifoudengchu')}}</div>
					</div>
					<div class="zzcbtn">
						<div class="zzcbtn1" @click="logout">{{$t('l_queding')}}</div>
						<div class="zzcbtn2" @click="loginout = false">{{$t('l_quxiao')}}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="zzc" v-if="xianlu">
			<div class="zzcbox">
				<div class="zzccon zzccon1">
					<div class="zzctext2">{{$t('l_xuanzexianlu')}}</div>
					<ul>
						<li v-for="(item,index) in xl" :key="index" @click="changeXl(item)" v-if="item.ms != -1">
							<div class="zzcleft">
								<div class="WrpyHI6m9kBJOubBqrlt" v-if="item.ms<=1000">
									<div style="background: rgb(4, 190, 2);"></div>
									<div style="background: rgb(4, 190, 2);"></div>
									<div style="background: rgb(4, 190, 2);"></div>
								</div>
								<div class="WrpyHI6m9kBJOubBqrlt" v-if="item.ms>1000 && item.ms<=3000">
									<div style="background: rgb(255, 170, 9);"></div>
									<div style="background: rgb(255, 170, 9);"></div>
									<div style="background: rgb(41, 53, 72);"></div>
								</div>
								<div class="WrpyHI6m9kBJOubBqrlt" v-if="item.ms>3000">
									<div style="background: rgb(234, 78, 61);"></div>
									<div style="background: rgb(41, 53, 72);"></div>
									<div style="background: rgb(41, 53, 72);"></div>
								</div>
								<div class="zzctext3">{{$t('l_xianlu')}}{{item.name}}</div>
							</div>
							<div class="zzcright">
								<div class="zzctext3" style="color: rgb(4, 190, 2);" v-if="item.ms<=1000">{{item.ms}}MS
								</div>
								<div class="zzctext3" style="color: rgb(255, 170, 9);"
									v-if="item.ms>1000 && item.ms<=3000">{{item.ms}}628MS</div>
								<div class="zzctext3" style="color: rgb(234, 78, 61);" v-if="item.ms>3000">
									{{item.ms}}628MS</div>
								<div class="Aw1MMVHkyunO1popQHyi l_Nn6lrPLPblbHbiULsf" v-if="item.name == baseName">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#music_success--sprite"></use>
										</svg>
									</i>
								</div>
								<div class="Aw1MMVHkyunO1popQHyi" v-else></div>
							</div>
						</li>
						<!-- <div class="zzcbtn">
							<div class="zzcbtn2" style="flex: 1;margin:15px 0;">确 定</div>
						</div> -->
					</ul>
					<img @click="xianlu = false" class="closeIcon"
						src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
				</div>
			</div>
		</div>
		<div class="zzc" v-if="yuyan">
			<div class="zzcbox">
				<div class="zzccon zzccon1">
					<div class="zzctext2">{{$t('l_xuanzeyuyan')}}</div>
					<ul>
						<li v-for="(item,index) in langList" @click="switchLang(item.key,item.name)" :key="index">
							<div class="zzcleft">
								<div class="zzctext3">{{item.name}}</div>
							</div>
							<div class="zzcright">
								<div class="Aw1MMVHkyunO1popQHyi l_Nn6lrPLPblbHbiULsf" v-if="item.name == langName">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#music_success--sprite"></use>
										</svg>
									</i>
								</div>
								<div class="Aw1MMVHkyunO1popQHyi" v-else></div>
							</div>
						</li>
					</ul>
					<img @click="yuyan = false" class="closeIcon"
						src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
				</div>
			</div>
		</div>


		<div class="tk" v-show="is_recharge">
		<!-- 充值弹框 -->
		<Recharge @close_tk="close_tk()"></Recharge>
		</div>

	
		<div class="mask" v-show="is_recharge" @click="is_recharge=0"></div>


		<Tabnav :activeInd="tabnavIndex"></Tabnav>

		
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import Recharge from '../../components/recharge.vue'
	export default {
		components: {
			Tabnav,
			Recharge,
		},
		data() {
			return {
				is_recharge:0,
				tabnavIndex: 4,
				loginout: false,
				userInfo: null,
				xianlu: false,
				yuyan:false,
				xl: [],
				baseMS: -1,
				setXl: '',
				baseName: '',
				langList: [
					// {
					// 	name: '简体中文',
					// 	key: 'cn'
					// },
					{
						name: 'English',
						key: 'en'
					},
					{
						name: 'Português',
						key: 'nl' //葡萄牙
					},
					// {
					// 	name: 'Việt Nam',
					// 	key: 'vn'  //越南
					// },
					// {
					// 	name: ' عرب . ',
					// 	key: 'al'  //阿拉伯
					// },
					// {
					// 	name: 'भारत',
					// 	key: 'in'  //印度
					// },
				
				],
				langName:""
			}
		},
		created() {
			this.network()
			this.reloadUserInfo()
			if(localStorage.getItem("locale")){
				this.langList.forEach((it,index)=>{
					if(it.key==localStorage.getItem("locale")){
						this.langName=it.name;
					}
				})
			}
		},
		methods: {
			close_tk(){
					this.is_recharge=0;
			},
			switchLang(l,name) {
			  this.$i18n.locale = l;
			  localStorage.setItem("locale",l)
			  this.langName=name
			  window.location.reload()
			},
			changeXl(item) {
				localStorage.setItem('APIURL', item.url)
				this.baseName = item.name
				this.baseMS = item.ms
				this.xianlu = false
			},
			network() {
				let that = this
				this.xl = JSON.parse(localStorage.getItem('baseURL'))
				let baseUrl = localStorage.getItem('APIURL')
				this.xl.forEach((item) => {
					if (item.url == baseUrl) {
						this.baseName = item.name
						that.baseMS = item.ms
					}
				})
				this.$F.network(() => {}, false)
			},
			logout() {
				localStorage.removeItem('token')
				// localStorage.setItem("token",l)
				// localStorage.clear()
				window.location.hash = '/'
				// window.location.href='/'
				window.location.reload()
			},
			goRecord(index) {
				localStorage.setItem('record_index', index)
				this.$router.push('./mingxi_record')
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			gonotice() {
				this.$router.push('./notice')
			},
			gowalletcenter() {
				this.$router.push('./walletCenter')
			},
			gosetting() {
				this.$router.push('./setting')
			},
			gosecurity() {
				this.$router.push('./security')
			},
			gosecure() {
				this.$router.push('./secure')
			},
			gorecharge() {
				this.is_recharge=1;
				console.log('我被点击了',this.is_recharge);
				// this.$router.push('../recharge/recharge')
			},
			goYuebao() {
				this.$router.push('./yuebao')
			},
			gokefu() {
				this.$router.push('../index/sevCus')
			},
			gofeedback() {
				this.$router.push('./feedback')
			},
			goabout() {
				this.$router.push('./about')
			},
			goVip() {
				this.$router.push('./vip')
			},
			gopromotion() {
				this.$router.push('./promotion')
			}
		}
	}
</script>

<style lang="less">
	.mine {
		background-color: var(--theme-bg-color);
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;

		.top_box {
			display: flex;
			-ms-flex-direction: column;
			flex-direction: column;
			height: 3.5rem;
			padding-top: 0.3rem;
			position: relative;
			width: 7.5rem;
			z-index: 1;

			.top_bg_box {
				background: linear-gradient(to bottom, var(--theme-bg-color), var(--theme-bg-color));
				height: 3.5rem;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 1;
			}

			.top_ava_box {
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding: 0 0.2rem;
				position: relative;
				z-index: 2;

				.ava_left_box {
					display: flex;

					.ava_img_box {
						border-radius: 0.1rem;
						height: 1.5rem;
						margin-right: 0.2rem;
						overflow: hidden;
						position: relative;
						width: 1.5rem;

						.ava_img {
							width: 1.5rem;
							height: 1.5rem;
							border-radius: 0.1rem;
						}

						.vip_level {
							bottom: 0;
							position: absolute;
							right: 0;

							.level_bg {
								height: 0.24rem;
								max-width: 0.66rem;
								min-width: 0.5rem;
								padding: 0 0.035rem;
								background: rgb(36, 178, 153);
								align-items: center;
								display: flex;

								.vip_img {
									height: 0.172rem;
									min-width: auto !important;
									width: 0.368rem;
								}

								span {
									background: initial;
									font-size: .22rem;
									font-style: italic;
									margin: -0.025rem 0 0 0.01rem;
									transform: scale(.9);
									color: #e5b952;
									text-shadow: 0 0.005rem 0.005rem rgba(0, 0, 0, .4);
								}
							}
						}
					}

					.ava_info_box {
						color: #fff;
						display: flex;
						flex-direction: column;
						font-size: .24rem;

						.ava_info,
						.ava_info_2 {
							.id_num {
								margin-left: 0.15rem;
							}

							.ava_icon {
								color: #fff;
								display: inline-block;
								font-size: .3rem;
								margin-left: 0.15rem;
								transform: translateY(0.04rem);

								.icons {
									display: inline-flex;
									justify-content: center;
									align-items: center;
									font-size: .4rem;
								}
							}
						}

						.ava_info_3 {
							align-items: center;
							display: flex;
							margin-top: 0.06rem;

							.img_icon {
								align-items: center;
								display: flex;
								justify-content: center;
								height: 0.32rem;
							}

							.line {
								background: #fff;
								height: 0.5rem;
								margin: 0 0.13rem 0 0.15rem;
								opacity: .5;
								width: 0.01rem;
							}

							.balance_box {
								// align-items: center;
								color: #fff;
								display: flex;
								font-size: .5rem;

								span {
									margin-right: 0.15rem;
								}

								.icons {
									height: 0.4rem;
									width: 0.4rem;
									font-size: 0.6rem;
								}
							}
						}
					}
				}

				.ava_right_box {
					display: flex;
					flex-direction: column;
					height: 100%;

					.message_box {
						top: -0.2rem;
						align-items: center;
						color: #fff;
						display: flex;
						flex-direction: column;
						font-size: .2rem;
						position: relative;

						.message_icon {
							position: relative;
							width: 1rem;

							.icons {
								font-size: 1rem;
							}

							.message_num {
								height: 0.32rem;
								position: absolute;
								width: fit-content;
								left: 0.4rem;
								top: 0.2rem;
								z-index: 100;

								.p1 {
									font-size: .18rem;
									height: 0.28rem;
									line-height: .28rem;
									padding: 0 0.05rem;
									background-color: var(--theme-secondary-color-error);
									border-radius: 0.125rem 0.125rem 0.125rem 0;
									color: #fff;
									width: 100%;
								}

								.p2 {
									border-bottom: 0.07rem solid transparent;
									border-left: 0.07rem solid var(--theme-secondary-color-error);
									border-right: 0.07rem solid transparent;
									height: 0;
									width: 0;
								}
							}
						}

						.message_text {
							margin-top: -0.5rem;
							font-size: .2rem;
						}
					}

					.right_icon {
						display: flex;
						flex: 1;
						justify-content: flex-end;
						margin-right: 0.24rem;
						margin-top: 0.12rem;

						.icons {
							color: #fff;
							height: 0.24rem !important;
							transform: rotate(180deg);
							width: 0.15rem !important;
							font-size: 0.4rem;
						}
					}
				}
			}

			.bottom_box {
				align-items: center;
				display: flex;
				justify-content: space-around;
				margin-top: 0.2rem;
				position: relative;
				z-index: 2;

				.fuction_item {
					align-items: center;
					color: #fff;
					display: flex;
					flex: 1;
					flex-direction: column;
					font-size: .24rem;
					position: relative;
					text-align: center;

					.icons {
						font-size: .8rem;
					}

					span {
						display: block;
						height: 0.4rem;
						margin-top: -0.3rem;
					}
				}

				.right_line {
					background: #fff;
					height: 0.65rem;
					width: 0.01rem;
				}
			}
		}

		.main_box {
			padding: 0 0.2rem 2rem;
			box-sizing: border-box;

			.main_top_box {
				background-color: var(--theme-main-bg-color);
				border-radius: 0.14rem;
				box-shadow: 0 0.03rem 0.1rem 0 rgba(0, 0, 0, .06);
				padding: 0.25rem 0.2rem 0.2rem;
				position: relative;
				width: 100%;
				box-sizing: border-box;

				.main_level_box {
					align-items: center;
					display: flex;
					justify-content: space-between;
					margin-bottom: 0.4rem;

					.main_level_left {
						display: flex;
						align-items: center;

						.level_ava {
							background-image: url(/icons/mine/img_dj0.png), url(/icons/mine/color1.png);
							width: 0.9rem;
							height: 0.9rem;
							font-size: 0.327273rem;
							align-items: center;
							background-position: 50%;
							background-repeat: no-repeat;
							background-size: contain;
							display: flex;
							justify-content: center;
							text-align: center;
							margin-right: .2rem;

							span {
								-webkit-background-clip: text;
								background-clip: text;
								background-image: linear-gradient(180deg, #f7ea94 0, #e5b952 51%, #ce9510);
								color: transparent;
								font-style: normal;
								font-weight: 700;
							}
						}

						.level_content {
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							width: 5rem;
							flex-grow: 1;

							&_top {
								font-size: .24rem;
								margin-bottom: 0.14rem;
								padding-top: 0.2rem;
								color: var(--theme-text-color-lighten);
								text-align: left;

								span {
									i {
										color: var(--theme-secondary-color-error);
										font-weight: 700;
										margin: 0 0.05rem;
									}

									strong {
										color: var(--theme-text-color-darken);
									}
								}
							}

							&_bottom {
								font-size: .2rem;
								align-items: center;
								display: flex;
								justify-content: space-between;

								p {
									width: 1.5rem;
									color: var(--theme-text-color-lighten);
								}

								.level_num {
									width: 3.95rem !important;
									position: relative;
									border-radius: 0.22rem;
									overflow: hidden;

									&_line {
										font-size: .25rem;
										position: relative;
										width: 100%;
										color: rgba(0, 0, 0, .65);
										background-color: var(--theme-text-color-placeholder);
										height: 0.22rem;
										border-radius: 0.22rem;

										.line_box {
											background-color: var(--theme-ant-primary-color-0);
											height: 0.22rem;
											border-radius: 0.22rem;
											overflow: hidden;
											position: relative;
											vertical-align: middle;
											width: 50%;

										}

										span {
											color: #fff;
											position: absolute;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -50%);
											font-size: 0.2rem;
										}
									}
								}
							}
						}
					}

					.main_level_right {
						margin-left: 0.2rem;

						.icons {
							color: var(--theme-color-line);
							font-size: .36rem;
							transform: rotate(180deg);
							display: block;
						}
					}
				}

				.main_item {
					display: flex;
					justify-content: space-between;

					&_list {
						word-wrap: break-word;
						align-items: center;
						color: var(--theme-text-color-darken);
						display: flex;
						flex-direction: column;
						font-size: .2rem;
						max-width: 100%;
						width: 1.6rem;
						text-align: center;

						.icons {
							font-size: .9rem;
							color: rgb(255, 170, 9);
						}

						span {
							margin-top: -0.3rem;
						}

						.anticon_icon {
							display: inline-block;
							position: relative;
							width: 0.8rem;
							height: 0.556522rem;
							background-image: url(/icons/mine/main2.png);
							background-position: -2.43478rem 0rem;
							background-size: 7.52rem 6.93565rem;
							margin-bottom: .1rem;
						}
					}

					&_list:nth-child(2) {
						.icons {
							color: rgb(4, 190, 2);
						}
					}

					&_list:nth-child(3) {
						span {
							margin-top: -0.24rem;
						}
					}

					&_list:nth-child(4) {
						.icons {
							color: rgb(234, 78, 61);
						}
					}
				}
			}

			.main_content_box {
				background-color: var(--theme-main-bg-color);
				border-radius: 0.14rem;
				box-shadow: 0 0.03rem 0.1rem 0 rgba(0, 0, 0, .06);
				margin: 0.2rem 0;
				padding: 0 0.2rem;

				.main_content_item {
					align-items: center;
					border-bottom: 0.01rem solid var(--theme-color-line);
					display: flex;
					height: 1rem;
					justify-content: space-between;
					padding-left: 0.1rem;

					&_left {
						align-items: center;
						color: var(--theme-mine-icon-color);
						display: flex;

						.icons {
							height: 0.6rem;
							width: 0.6rem;
							color: rgb(255, 170, 9);
							position: relative;

							svg {
								height: 0.6rem;
								width: 0.6rem;
								overflow: hidden;
								position: absolute;
							}
						}

						span {
							color: var(--theme-text-color-darken);
							font-size: .24rem;
							margin-left: 0.18rem;
						}
					}

					&_right {
						align-items: center;
						display: flex;

						.right_text {
							color: var(--theme-primary-color);
							font-size: .22rem;
						}

						.right_allow {
							margin-left: 0.06rem;

							.icons {
								color: var(--theme-color-line);
								transform: rotate(180deg);
								height: 0.44rem;
								width: 0.44rem;
								position: relative;
								display: block;

								svg {
									height: 0.44rem;
									width: 0.44rem;
									overflow: hidden;
									position: absolute;
								}
							}
						}
					}
				}

				.main_content_item:nth-child(2),
				.main_content_item:nth-child(3),
				.main_content_item:nth-child(5) {
					.main_content_item_left {
						.icons {
							color: var(--theme-mine-icon-color);
						}
					}

					.main_content_item_right {
						span:nth-child(1) {
							color: var(--theme-text-color-darken);
							margin-right: 0.07rem;
						}

						span:nth-child(2) {
							color: var(--theme-secondary-color-success);
						}
					}

				}

				.main_content_item:nth-child(4),
				.main_content_item:nth-child(7) {
					.main_content_item_left {
						.icons {
							color: rgb(4, 190, 2);
							;
						}
					}
				}

				.main_content_item:nth-child(6),
				.main_content_item:nth-child(8),
				.main_content_item:nth-child(9) {
					.main_content_item_left {
						.icons {
							color: var(--theme-mine-icon-color);
						}
					}

					.main_content_item_right {
						.right_text {
							color: var(--theme-text-color-lighten);
						}
					}

				}

				.main_content_item:nth-child(10) {
					border-bottom: 0;

					.main_content_item_left {
						.icons {
							color: var(--theme-secondary-color-error);
						}
					}
				}
			}
		}
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-main-bg-color);
		border: 1px solid;
		border-color: var(--theme-main-bg-color);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem;
	}

	.zzccon1 {
		padding: .2rem .07rem 0 .2rem;
	}

	.zzctext {
		font-size: .22rem;
		font-weight: 700;
		color: #ffffff;
		line-height: 1.4;
		text-align: center;
	}

	.zzctext1 {
		color: var(--theme-text-color);
		font-size: .24rem;
		margin: 0.3rem 0 0.65rem;
		text-align: center;
	}

	.zzcbtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.zzcbtn1 {
		flex: 1;
		font-size: .24rem;
		height: 0.7rem;
		line-height: 0.7rem;
		background-color: transparent;
		border: 1px solid;
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-color);
		border-radius: 0.14rem;
		padding: 0 0.1rem;
	}

	.zzcbtn2 {
		background-color: var(--theme-main-bg-color);
		border-color: var(--theme-main-bg-color);
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: 0.7rem;
		margin-left: 0.3rem;
		flex: 1;
		border-radius: 0.14rem;
		padding: 0 0.1rem;
	}

	.zzctext2 {
		width: 100%;
		font-size: .22rem;
		font-weight: 700;
		color: #fff;
		text-align: center;
	}

	.zzccon1 li {
		width: 100%;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--theme-main-bg-color);
	}

	.zzccon1 li:first-child {
		border-top: 1px solid var(--theme-main-bg-color);
	}

	.zzccon1 ul {
		max-height: 265px;
		overflow-y: scroll;
		margin-top: 0.21rem;
		padding-right: .13rem;
	}

	.zzcleft {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.WrpyHI6m9kBJOubBqrlt {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
	}

	.WrpyHI6m9kBJOubBqrlt div:first-child {
		height: 0.116rem;
		margin-right: 0.049rem;
		border-radius: 0.029rem;
		width: 0.058rem;
		background: rgb(4, 190, 2);
	}

	.WrpyHI6m9kBJOubBqrlt div:nth-child(2) {
		height: 0.188rem;
		margin-right: 0.049rem;
		border-radius: 0.029rem;
		width: 0.058rem;
		background: rgb(4, 190, 2);
	}

	.WrpyHI6m9kBJOubBqrlt div:last-child {
		height: 0.26rem;
		margin-right: 0.049rem;
		border-radius: 0.029rem;
		width: 0.058rem;
		background: rgb(4, 190, 2);
	}

	.zzctext3 {
		color: #fff;
		margin-left: 15px;
		font-size: .22rem;
		line-height: .32rem;
	}

	.zzcright {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.Aw1MMVHkyunO1popQHyi {
		height: 0.3rem;
		margin-left: 0.15rem;
		width: 0.3rem;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 100%;
	}

	.l_Nn6lrPLPblbHbiULsf {
		align-items: center;
		display: flex;
		font-size: .14rem;
		justify-content: center;
		line-height: .33rem;
		background-color: var(--theme-primary-color);
		color: #fff;
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.tk{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1001;
		width: 100vw;
		height: 90%;
		border-top-left-radius: 0.2rem;
		border-top-right-radius: 0.2rem;
		background-color: var(--theme-bg-color);
	}
	.mask{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 88;
		height: 100%;
		background-color: rgba(0, 0, 0, .45);
	}
</style>